<template>
  <div class="about">
    <at-button
      v-if="debug"
      @click="showData(chartData)"
    >
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div
      id="myChart222"
      :style="{width: '800px', height: '550px'}"
    ></div>
    <!-- {{names}}
    {{xfData}} -->
    <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>

<style scoped>
</style>

<script>
import {
  mapState,
  mapMutations
} from "vuex";

export default {
  name: "hello",
  data() {
    return {
      chartData: {
        names: [],
        xfData: [],
        jjData: [],
        cfDara: []
      }
    };
  },
  computed: {
    ...mapState(["cookies", "debug"])
  },
  mounted() {
    this.updateCookies();
    if (undefined !== this.cookies.chart222) {
      this.chartData = this.cookies.chart222.data;
      var namelist = [];
      var valueList = [];
      // console.log(this.chartData);
      this.chartData[0].data.forEach((item, index) => {
        namelist[index] = item.name;
        valueList[index] = item.value;
      });
      this.names = namelist;
      this.xfData = valueList;

      valueList = [];
      this.chartData[1].data.forEach((item, index) => {
        valueList[index] = item.value;
      });
      this.names = namelist;
      this.jjData = valueList;

      valueList = [];
      this.chartData[2].data.forEach((item, index) => {
        valueList[index] = item.value;
      });
      this.cfDara = valueList;
      this.drawLine();
    } else {
      alert("非法访问");
    }
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart222 = this.$echarts.init(
        document.getElementById("myChart222")
      );

      var option = {
        title: {
          text: this.cookies.chart222.title,
          textStyle: {
            fontSize: "26",
            fontFamily: "FZXBSJW"
          },
          x: 'center'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {
        //       type: "png"
        //     }
        //   }
        // },
        grid: {
          left: "5%",
          right: "2%",
          top: "15%"
        },

        legend: {
          //图例
          left: "right",
          top: "10%",
          itemGap: 40, //设置两个图例之间的距离

          //此处的名字要和“series”中的name一样，否则不显示

          data: ["信访总量", "检举控告量", "重复访量"]
        },
        xAxis: [{
          type: "category",
          data: this.names
        }],
        yAxis: [{
          type: "value"
        }],
        series: [{
          name: "信访总量",
          type: "bar",
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: "16"
                  // color: "DarkSlateGray"
                }
              }
            }
          },
          data: this.xfData,
          // markLine: {
          //   //   symbol: "none",
          //   data: [
          //     {
          //       type: "average",
          //       name: "平均值"
          //     }
          //   ],
          //   lineStyle: {
          //     type: "solid"
          //   }
          // }
        },
        {
          name: "检举控告量",
          type: "bar",
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: "16"
                  // color: "DarkSlateGray"
                }
              }
            }
          },
          data: this.jjData,
          markLine: {
            symbol: "none",
            data: [{
              type: "average",
              name: "检控量平均"
            }],
            lineStyle: {
              type: "solid"
            },
            label: {
              show: true,
              position: 'insideEndTop',
            //   formatter:'{b}:{c}'
              formatter: (e)=>{
                //   alert(e)
                  return '检控量平均 '+e.value.toFixed(2)
              },
            }
          }
        },
        {
          name: "重复访量",
          type: "bar",
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: "16"
                  // color: "DarkSlateGray"
                }
              }
            }
          },
          data: this.cfDara,
          // markLine: {
          //   data: [{ type: "average", name: "平均值" }],
          //   lineStyle: {
          //     type: "solid"
          //   }
          // }
        }
        ]
      };
      // 绘制图表
      myChart222.setOption(option);
    },
    showData(jsondata) {
      this.$Modal.alert({
        content: jsondata
      });
    },

    downloadImpByChart() {
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart222')), this.cookies.chart222.title)
    }
  }
};
</script>
<style scoped>
.about {
  padding-top: 2rem;
}
#myChart222 {
  margin: 0 auto;
}
</style>
